最近在看Vue之类的前端框架，发现现在前端已经变化这么大了，SPA（Single Page Application）已经非常流行了，前端也可以通过路由的方式去控制页面变化了例如（Vue-Route），所以也就好奇的搜了一下对于SPA页面现在都是怎么追踪数据的。

    实际上我们知道包括GA或者GTM每一次代码的激活都是通过页面的刷新的来实现，但是SPA实际上每个页面的变化都是没有重新刷新页面的，如果用通常的办法去部署的话，即便变换了页面，代码也只会在刚打开页面的那一瞬间去激活一次，后续整个数据追踪的流程都会有问题；对于Vue来说，有相应的插件比如 Vue-gtm可以在嵌入到开发中（因为现在大部分前端的模块化开发最后都是会打包成一个Js文件的），但是这种对于开发量会比较大，需要整合比较多的内容。实际上GTM也是可以追踪SPA的，以下就以Vue 来举例子（react 这些都是差不多的）；

# 1  代码部署

    这里需要稍微讲一下前端现在的开发流程（我也是学了一下Vue才知道现在前端也可以模块化开发了）。现在SPA 页面都是先用模块化开发的方式，例如Vue 就是组件开发，最后利用webpack之类的打包工具打包成一个Js文件和一个css文件。

如果是这样话，GTM或者Ga的代码应该部署在哪里呢？实际上这种模块化的开发会提供一个入口的html文件（一般是index.html)，追踪代码应该放在入口的html中，这样跟普通部署的方式就一致了。

# 2 单页面的追踪

    实际上单页面追踪最大的难点是在于页面不刷新的情况就可以完成页面的切换，例如从 linpiner.com/#/ 切换到 linpiner.com/#/contact-us 的时候整个页面没有进行刷新，那么代码是不会被再次触发，也就是说即便用户浏览了两个页面， pageview 还是 1。所以我们需要怎么去追踪这个页面的变化呢? 答案就是在Url上，仔细观察实际上页面的url是有变化，也就是URL Hash Mark有变化（仔细观察 #号背后的字母），那么我们实际上只要监控这个hash变化就好了，在GTM里内置一类 History 变量可以获取这个hash的变化。首先转到变量页面激活内置的 History 变量

然后去到Triggers > New  设置

这个触发器表示每当URL hash出现了变化就会激活这个Tag（类似我们通常使用的通过页面刷新来激活Tag），接着Preview 测试一下：

可以看到相应的变量已经被激活啦

 

# 3 传输数据到GA

如果我们就这样利用触发器把当前的所触发的页面传送到GA的话还会有一个问题

Ga 实际上会自动把Url 进行补全和转移，如果我们用这种方式传输，那么最后想用的 Hash Mark 是不会传过去的，因为Ga认为这是同一个页面。对此需要对GTM的Tag进行一些配置；

修改Tag 配置：

1. Tag Type: Universal Analytics
2. Track Type: Pageview
3. Choose Google Analytics Settings Variable. 
4. Enter Tracking ID. 
5. More Settings > Fields to Set > page >>> {{New History Fragment}} ，在这里将相应的hash Mark 获取并传送到GA

 

最后的结果应该是这样： Hash Mark 也被传送到了GA上

# 4 More Detail

如果页面有二级或者以上的路径，例如:

https://www.example.com/category1/product2/#contact-us

，那么最中获取到Hash Mark 也只会有 Contact Us 之前的category1/product2的路径将不会传到GA（因为History 变量只监控 Hask Mark 的变化），如果需要获取到这部分可以这么设置：

修改上面 Tag 的Field to Set 的 page 变量，把之前的路径拼凑进去

• Instead of page >>> {{New History Fragment}}
• Enter page >>> {{Page Path}}{{New History Fragment}}

 

# 5 Further Step

如果单页面的应用 hash Mark也没有变化，实际上也可以做，思路可以参考利用dataLayer追踪事件的方式，监听每一个会触发页面转换锚点，每当用户触发页面转化的时候例如点击锚点，就推送相应的数据进去dataLayer，然后 GTM在通过 dataLayer的变量获取相应的值，也可以实现以上的效果。但是最好的解决方式就是别用这种单页应用的方式，因为URL没有变化就说明页面都所有资源都堆在一个页面上，这图的是什么？如果页面资源比较多，第一次打开还不得卡死...这种情况应该非常非常少见。不过之后有空的话，我会补个用Vue的写的例子。

也可以看下这篇： SPA Tracking